<template>
  <div>
    <Cascader :data="cityList" :load-data="loadData" v-model="cityValue" change-on-select></Cascader>

    <Button @click="getCityVal">获取值</Button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: [],
      cityValue: []
    }
  },
  mounted () {
    this.cityList = this.resetCity(arrCity);
  },
  methods : {
    loadData (item, callback) {
      item.loading = true;
      item.children = this.resetCity(item.sub);
      item.loading = false;
      callback();
    },
    resetCity (params) { //分段获取地址信息
      var arr = new Array();
      for(var i = 0; i < params.length; i++) {
        var obj = {
          label: params[i].name,
          value: params[i].name
        }
        if(params[i].sub != undefined) {
          obj.index = i;
          obj.loading = false;
          obj.sub = params[i].sub;
          obj.children = [];
        }
        arr.push(obj);
      }
      return arr;
    },
    getCityVal () {
      console.log(this.cityValue);
    }
  }
}
</script>

<style>

</style>